<template>
  <div class="Home">
    <div class="Home-left">
      <SilderNav
        :menusData="classifyList"
      />
    </div>
    <div class="Home-right">
      <div class="content-list">
        <div class="content-list-rank">
          <template v-for="(item, index) in rankItems">
            <div :key="index" class="content-list-rank-item">
              <div class="title">
                <div class="title-name">
                  <custom-icon :type="`icon-${item.icon}`"  />
                  {{ item.title }}
                </div>
                <div class="title-more"></div>
              </div>
              <div class="list">
                <template v-for="rank in rankList[item.dataKey]">
                  <div :key="rank.id" class="list-item">
                    {{ rank.title }}
                  </div>
                </template>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div class="home-list">
        <template v-for="item in recommendAllFeedList">
          <div :key="item.item_info.article_id" class="home-list-item">
            <div class="meta">
              <span>{{ item.item_info?.author_user_info?.user_name }}</span>
              <span>{{ item.item_info.article_info?.mtime }}</span> |
              <span>{{ item.item_info?.tags?.map(tag => tag.tag_name).join('·') }}</span>
            </div>
            <div class="title">{{ item.item_info.article_info?.title }}</div>
            <div class="abstract">{{ item.item_info.article_info?.brief_content }}</div>
            <div class="action">
              <span>{{ item.item_info.article_info?.view_count }}</span>
              <span>{{ item.item_info.article_info?.digg_count }}</span>
              <span>{{ item.item_info.article_info?.comment_count }}</span>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    async asyncData({ app, params, store }) {
      const res = await app.$api.getTechnicalClassifyList();
      const { data: classifyList } = res;

      const resRticleRank = await app.$api.getRticleRankList({
        category_id: 1,
        type: 'hot',
        count: 3,
        from: 1,
      });
      const rticleRankList = resRticleRank.data.map(item => ({
        id: item.content.content_id,
        title: item.content.title,
        avatar: item.author.avatar,
        name: item.author.name,
      }));

      const resSelectedRank = await app.$api.getSelectedRankList({
        page_size: 3, 
        cursor: "",
        sort_type: 2,
        from: 1
      });
      const selectedRankList = resSelectedRank.data.map(item => ({
        id: item.column.column_id,
        title: item.column.column_version.title,
        avatar: item.column.author.avatar_large,
        name: item.column.author.user_name,
      }));

      const resCollectionRank = await app.$api.getCollectionRankList({
        module_type:0,
        limit: 3,
        cursor: "",
        sort_type: 2,
        filter: {
          article_info: true
        },
        from: 1
      });
      const collectionRankList = resCollectionRank.data.map(item => ({
        id: item.collection_set.collection_id,
        title: item.collection_set.collection_name,
        avatar: item.creator.avatar_large,
        name: item.creator.user_name,
      }));
      // 所有推荐
      const resRecommendAllFeed = await app.$api.getRecommendAllFeedList({
        id_type: 2,
        client_type: 2608,
        sort_type: 200,
        cursor: "0",
        limit: 20
      });
      const { data: recommendAllFeedList } = resRecommendAllFeed;
      console.log('dataRank--------', recommendAllFeedList);
      if (!res.err_no) {
        return {
          classifyList,
          rankList: {
            rticle: rticleRankList,
            selected: selectedRankList,
            collection: collectionRankList
          },
          recommendAllFeedList
        }
      }
    },
    data() {
      return {
        classifyList: [],
        rankList: {
          rticle: [],
          selected: [],
          collection: [],
        },
        rankItems: [
          {
            title: '综合文章榜',
            icon: 'backend',
            dataKey: 'rticle',
          },
          {
            title: '精选专栏榜',
            icon: 'backend',
            dataKey: 'selected',
          },
          {
            title: '推荐收藏集',
            icon: 'backend',
            dataKey: 'collection',
          },
        ],
        recommendAllFeedList: []
      }
    },
  }
</script>

<style lang="less" scoped>
.Home{
  display: flex;
  margin-top: 20px;
  &-right{
    flex: 1;
    margin-left: 20px;
    // display: flex;
    .content-list{
      width: 720px;
      box-sizing: border-box;
      &-rank{
        display: flex;
        padding: 20px 0;
        background-color: #fff;
        &-item{
          width: 200px;
          padding: 0 20px;
          border-right: 1px solid rgba(228,230,235,1);
          &:last-child{
            border-right: none;
          }
          .title{
            margin-bottom: 5px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          .list{
            &-item{
              padding: 5px 0;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
          }
        }
      }
    }
    .home-list{
      width: 720px;
      padding: 20px 20px;
      background-color: #fff;
      box-sizing: border-box;
      &-item{
        padding: 10px 0;
        border-bottom: 1px solid rgba(228,230,235,1);
        transition: all .3s ease-in;
        .title{
          margin: 4px 0;
        }
      }
    }
  }
}
</style>